import React from "react";
import ProTypes from "prop-types";
import "./TabList.scss";

const TabList = (props) => {
    const { files, activeId, unSaveIds, onTabClick, onCloseTab } = props;
    return (
        <ul className="nav nav-pills mb-2 tablist-component">
            {files.map((file) => {
                // console.log(file.id, activeId);
                // 未保存图标
                const withUnsavedMark = unSaveIds.includes(file.id);
                return (
                    <li className="nav-item me-1" key={file.id}>
                        <a
                            className={`nav-link border rounded-1 pt-1 pb-1 ${file.id === activeId ? "active" : ""} ${
                                withUnsavedMark ? "withUnsaved" : ""
                            }`}
                            aria-current="page"
                            href="/#"
                            onClick={(e) => {
                                // 阻止默认事件
                                e.preventDefault();
                                onTabClick(file.id);
                            }}
                        >
                            <span>{file.title}</span>
                            <i
                                className="bi bi-x-lg ms-2 close-icon"
                                onClick={(e) => {
                                    // 阻止事件冒泡
                                    e.stopPropagation();
                                    onCloseTab(file.id);
                                }}
                            ></i>
                            {withUnsavedMark && <span className={"rounded-circle unsaved-icon"}></span>}
                        </a>
                    </li>
                );
            })}
        </ul>
    );
};

TabList.propTypes = {
    files: ProTypes.array,
    activeId: ProTypes.string,
    unSaveIds: ProTypes.array,
    onTabClick: ProTypes.func,
    onCloseTab: ProTypes.func,
};

TabList.defaultProps = {
    unSaveIds: [],
};

export default TabList;
